I have a php project and I use composer for php libraries and npm/gulp for CoreUI.
CoreUI doesn't have TinyMce so I installed it with npm. The files are now inside node_modules folders, but I think they should be moved outside.
I have 2 options:
use composer to set up TinyMce anywhere I want, probably
use gulp to move/copy outside node_modules
I believe the recommended solution is to copy with gulp but I am not sure how, which files and where.
How do I copy with gulp?
tried without success
gulp.task('copy', function () {
gulp.src('./node_modules/tinymce')
.pipe(gulp.dest('./src/vendors/'));
});
Where should I copy eg. src/vendors/?
Thank you
Related
I learned to do a working environment based bower, from there install yoeman and gulp and materialize, I made a web page to root of all this, now I want to upload a host (like 000webhost or firebase) but I do not know which files are the ones I should upload
thx
You should upload everything except bower_components directory since it's content is used only when you compile down the things using gulp on your local machine. Once all your source files are piped through gulp, they are not required on the destination location. None of those files is or should be used during a http request.
I don't know exactly what is your project's structure, but because you specified what you use (bower, gulp) then I can deduct.
So after gulp finishes it's work, you have a public directory where all your combined, minified and copied assets live. This is obviously needed on the server, in your markup, you should refer to those files, not the ones fetched by bower when you've done bower install library1 --save. bower install library2 --save.
I currently have a file structure like this
SASS
gulpfile.js
node_modules
sites
example-site
scss
css
example-site-two
scss
css
example-site-three
scss
css
I have gulp installed in the main parent SASS folder with a task 'sass-all' that can go through every single sites scss folder and compile it into css.
I'm trying to write a new task called 'sass-single' which can be run from any of the example-site folders. So let's say I'm in the folder "example-site-two", I want to be able to cmd and do 'gulp sass-single' and ONLY have it compile the SASS in this site. Same thing for a watch-single task I'd like to setup.
Problem is whenever I run this task from a site folder, it changes my working directory up to the parent SASS folder. I don't want to have 100 different tasks for every different site, I'd prefer to just have one 'sass-single' task thats smart enough to only compile the files from the folder I was in when I ran the script.
current Gulp task attempt
gulp.task('sass-single', function () {
process.chdir('./');
// Where are the SCSS files?
var input = './scss/*.scss';
// Where do you want to save the compiles CSS file?
var output = './css';
return gulp
.src(input)
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(output));
});
However this goes back to the main SASS folder and then just does nothing.
How would I go about modifying this to be able to run from any site folder and have it only do it for that site?
If you want to change the current working directory (CWD) back to the directory where you invoked gulp then this won't work:
process.chdir('./');
That's a relative path. Relative paths are relative to the CWD. But by the time you execute process.chdir('./') Gulp has already changed the CWD to the directory where your Gulpfile.js is located. So you're just changing the CWD to ... the CWD.
You could explicitly pass a CWD to gulp on the command line:
SASS/sites/example-site> gulp --cwd .
But that would get annoying pretty quickly.
Luckily for you Gulp stores the original CWD in process.env.INIT_CWD before changing it. So you can use the following in your task to change the CWD back to the original:
process.chdir(process.env.INIT_CWD);
I have an isolated npm module with assets. I want to add gulp to this. Inside the project aside from my assets i have a bash script that downloads and updates my assets. I have been trying to find a way to create a gulp task that can run this script but i have not yet been able to get it to work. I tried the following and although it ran it did not run the script.
gulp.task('update-json', function(){
gulp.src('assets/update_json.sh');
});
With being able to have the bower_component folder outside of the app folder, how would it be possible to load the bower packages to work with gulp? The plan is to use Web Starter Kit that has gulp, browser sync already set up.
I think the set up will be to move the bower modules, with gulp - that has the task to copy the specified modules over to app/scripts/vendors or app/styles/vendors. So it will run two tasks (one for scripts and one for styles).
It will copy it over, and if newer updates were downloaded - replace the existing files. Concat and Minify no matter if serving or building.
Since WSK already builds a main.js, the bower packages will be built into a library.js file. Can someone guide me in the right direction to build this setup?
I've attached a few things I think the setup will need.
app/index.html
<!-- build:js scripts/vendor.js -->
<script src="bower_components/angular/angular.js"></script>
<!-- endbuild -->
Build into /dist/scripts/venfors.js
gulpfile.js
// Bower - bower_components directory - located to root folder
var directory = {
bower = './bower_components/'
};
// Bower - Scripts
gulp.task('bower-scripts', function() {
return gulp.src([
// AngularJS
directory.bower+'bower_components/angular/angular.js'
])
.pipe( --- Copy src to /app/scripts/vendor --- )
});
Not sure if there is there is anything more I need to do? Or if my setup is incorrect?
Reason why I want to keep the bower_components folder in the root folder NOT the app folder is to keep everything cleaner.
Brief: Gulp and WSK setup using bower, with bower_components folder outside of "App" folder.
So, I believe this should help others:
What we are doing is copying over the packages over from bower_components folder in the root folder to our app scripts folder.
// Bower - Scripts
gulp.task('bower-scripts', function() {
var directory = { bower : './bower_components/' };
return gulp.src([
directory.bower+'**/*.min.js'
])
// Output Files
.pipe(gulp.dest('app/scripts/vendor'))
});
When we rung gulp serve, we need to add the bower-scripts task as a dependency to our serve task
In index.html, specify the bower package you want to use like so:
<!-- build:js scripts/library.min.js -->
<script src="scripts/vendor/angular/angular.min.js"></script>
<!-- endbuild -->
Than when you run gulp (to build) or gulp serve (to test) - everything should fall into place.
If you can streamline this - or make it more efficient, than drop a line!
I am trying to use Jekyll together with Compass.
On one command line I'm running jekyll --auto and in another one compass watch.
The SASS files are located in /stylesheets and are compiled into /_site/stylesheets.
Jekyll is configured to ignore /stylesheets.
Compiling the stylesheets works fine in the beginning, but everytime I change something that makes Jekyll regenerate the site, it overwrites the whole /_site folder and /_site/stylesheets is gone. Compass doesn't regenerate it since the source SASS files haven't changed.
Is there another way to use Jekyll together with Compass?
Can I configure Jekyll to not overwrite the complete output folder but just the files that changed?
Im using Jekyll & Compass for my github page. here: https://github.com/ardianzzz/ardianzzz.github.com
Simple,
I just put the generated css folder in the root folder. Jekyll will generate the file inside _site folder.
As you can see in my repository.
Just call the CSS with the following code
<link href = "/css/screen.css" ...
bad english, sorry. :)
The issue is that Jekyll, when run, scraps all the contents of the _site directory. The way I got around this was to use rake for deployment, and then have the following in my rakefile:
task :generate => :clear do
sh 'jekyll'
sh 'compass compile'
end
I then just run:
$ rake generate
Which populates the jekyll directory, and then puts the compass files over.
A neater solution might be to make your compass -watch process (assuming that is what you are running) compile the compass to projectdir/css. When you then run jekyll it will just pull that css directory directly into _site/css and you're done, no problems (see below for dir structure).
projectdir/
css/
stylesheets/
If you put anything in _site/css and then run jekyll after it will be removed, so you either need to run compass after, or put the compass files into the css folder in the root directory, and then jekyll will just copy the files correctly.